import OSSImageUpload from '@/components/OSSImageUpload';
import TeacherSelect from '@/components/TeacherSelect';
import { useEditCourseInfo, useGetCourseInfo } from '@/services/course';
import { ITeacher, IValue } from '@/utils/types';
import {
  Button,
  Col,
  Drawer, Form, Input, InputNumber,
  Row,
  Space,
  Spin,
} from 'antd';
import TextArea from 'antd/es/input/TextArea';
import { useEffect } from 'react';

interface IProps {
  id?:string,
  onClose:(isReload?: boolean) => void
}

/**
* 课程编辑
*/
const EditCourse = ({ onClose, id }:IProps) => {
  const [form] = Form.useForm();
  const [editHandler, editLoading] = useEditCourseInfo();
  const { getCourseInfo, loading } = useGetCourseInfo();
  useEffect(() => {
    const init = async () => {
      if (id) {
        const res = await getCourseInfo(id);
        console.log('res', res);
        form.setFieldsValue({
          ...res,
          teachers: res.teachers ? res.teachers.map((item:ITeacher) => ({
            label: item.name,
            value: item.id,
          })) : [],
          coverUrl: res.coverUrl ? [{ url: res.coverUrl }] : [],
        });
      } else {
        form.resetFields();
      }
    };
    init();
  }, [id]);
  const onSubmitHandler = async () => {
    // 此操作获得values和onFinish方法获取的values一样，两种方法
    const values = await form.validateFields();
    console.log('values', values);
    if (values) {
      editHandler(id, {
        ...values,
        teachers: values.teachers?.map((item:IValue) => item.value),
        coverUrl: values.coverUrl[0].url,
      }, onClose);
    }
  };
  return (
    <Drawer
      title={id ? '编辑课程' : '新建课程'}
      onClose={() => onClose()}
      width={720}
      open
      forceRender // 强制render，用于内部内容还没加载时的报错
      extra={(
        <Space>
          <Button onClick={() => onClose()}>取消</Button>
          <Button type="primary" loading={editLoading} onClick={onSubmitHandler}>提交</Button>
        </Space>
      )}
    >
      <Spin spinning={loading}>
        <Form form={form}>
          <Form.Item
            label="封面图"
            name="coverUrl"
            rules={[{
              required: true,
            }]}
          >
            <OSSImageUpload imgCropAspect={2 / 1} />
          </Form.Item>
          <Form.Item
            label="课程名称"
            name="name"
            rules={[{
              required: true,
            }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="任课老师"
            name="teachers"
            rules={[{
              required: true,
            }]}
          >
            <TeacherSelect />
          </Form.Item>
          <Form.Item
            label="课程描述"
            name="desc"
            rules={[{
              required: true,
            }]}
          >
            <TextArea rows={5} showCount maxLength={200} />
          </Form.Item>
          {/* 使用栅栏布局，Row包裹的会在一行；gutter={20}内部列元素20px间距 */}
          <Row gutter={20}>
            <Col>
              <Form.Item
                label="限制人数"
                name="limitNumber"
                rules={[{
                  required: true,
                }]}
              >
                <InputNumber min={0} addonAfter="人" />
              </Form.Item>
            </Col>
            <Col>
              <Form.Item
                label="持续时长"
                name="duration"
                rules={[{
                  required: true,
                }]}
              >
                <InputNumber min={0} addonAfter="分钟" />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item
            label="适龄人群"
            name="group"
            rules={[{
              required: true,
            }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="基础能力"
            name="baseAbility"
            rules={[{
              required: true,
            }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="预约信息"
            name="reserveInfo"
            rules={[{
              required: true,
            }]}
          >
            <TextArea rows={5} showCount maxLength={200} />
          </Form.Item>
          <Form.Item
            label="退款信息"
            name="refundInfo"
            rules={[{
              required: true,
            }]}
          >
            <TextArea rows={5} showCount maxLength={200} />
          </Form.Item>
          <Form.Item label="其他信息" name="otherInfo">
            <TextArea rows={5} showCount maxLength={200} />
          </Form.Item>
        </Form>
      </Spin>
    </Drawer>
  );
};

EditCourse.defaultProps = {
  id: '',
};

export default EditCourse;
